<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .news_item {
            border: 2px solid yellowgreen;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="container">

            <div class="row news_item">
                <input type="text" v-model="msg" @keydown.enter="search" @keyup="mychange()">
                <button @click="search">搜索</button>
            </div>

            <div v-for="(item,index) in news" class="news_item">
                <!-- <h2>{{item.title}}</h2> -->
                <h1 v-html="item.title"></h1>
                <p>
                    来源：{{item.author_name}}
                </p>
                <p>
                    更新时间：{{item.date}}
                </p>
                <div>
                    <img :src="item.thumbnail_pic_s" alt="">
                </div>
            </div>

        </div>
    </div>
</body>
<script src="./vue.min.js"></script>
<script type="module">
    import news from "./data.js"
    // console.log(news);
    var vm = new Vue({
        el: "#app",
        data: {
            news: [],
            msg: ""
        },
        created() {
            
            this.news = news.result.data;
        },
        methods: {

            search() {
                if (this.msg.length == 0) {
                    this.news = news.result.data
                } else {
                    var keyWords = this.msg;
                    this.news = this.news.filter(item => {
                        return item.title.indexOf(keyWords) !== -1;
                    })
                    this.news.forEach(item => {
                        let reg = new RegExp(keyWords, "g")
                        item.title = item.title.replace(reg, `<font color='red'>${keyWords}</font>`);
                    });

                }
            },
            mychange() {
                if (this.msg.length == 0) {
                    this.news = news.result.data
                }
                
            }
        },


    })
</script>

</html>